<template>
  <div class="markStarDrawer">
    <el-drawer
        title="星级标记"
        :visible.sync="dialogShow"
        :with-header="true"
        :size="device === 'mobile'?'80%':'35%'"
        @close="handleClose"
        >
        <div class="drawer_content" style="padding:0 20px 20px 0px;">
          <el-form :model="form" :rules="rules" label-width="120px" ref="formRef">
           <el-form-item label="客户星级" prop="userLevel">
                 <el-select
                  v-model="form.userLevel"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width:100%"
                 >
                   <el-option
                    v-for="(item, index) in userLevelOption"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    ></el-option>
                 </el-select>
            </el-form-item>
            <el-form-item label="标记方式" prop="markType">
                <el-select
                 v-model="form.markType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                >
                  <el-option
                   v-for="(item, index) in markTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                   ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item 
              label="手机号MD5" 
              prop="phoneMd5"
              v-if="form.markType === 0"
            >
              <el-input
                v-model="form.phoneMd5"
                style="width: 100%"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item 
              label="导入文件" 
              prop="file" 
              v-if="form.markType === 1">
               <el-button
                type="info"
                plain
                icon="el-icon-upload2"
                size="mini"
                @click="handleImport"
              >文件导入</el-button>
            </el-form-item>
            
           
          </el-form>
          <div class="drawer_footer" style="text-align: center;">
            <el-button type="primary" @click="handleSubmit('formRef')"
              >确 定</el-button
            >
            <el-button @click="handleClose">取 消</el-button>
          </div>
        </div>
      </el-drawer>
      <!-- 导入对话框 -->
      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
        <el-upload
          ref="upload"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :disabled="upload.isUploading"
          :auto-upload="false"
          drag
          :file-list="fileList"
          :on-change="handleChange"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <span>仅允许导入xls、xlsx格式文件。</span>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {markStar} from "@/api/customer/customerDetails";
export default {
  name: 'markStarDrawer',
  data() {
    return {
      // 星级标记抽屉显示状态
      dialogShow: false,
      // 星级标记的表单信息
      form: {
      },
      markTypeOption:[
        { label: "输入", value: 0 },
        { label: "导入", value: 1 }
      ],
      // 客户星级模式筛选项
      userLevelOption: [
        { label: "0星",value: 0, },
        { label: "1星",value: 1, },
        { label: "2星",value: 2, },
        { label: "3星",value: 3, },
        { label: "4星",value: 4, },
        { label: "5星",value: 5, },
      ],
      // 星级标记表单校验规则
      rules: {
        markType: [
          { required: true, message: "请选择标记方式", trigger: "blur" },
        ],
        userLevel: [
          { required: true, message: "请选择客户星级", trigger: "blur" },
        ],
      },

       // 数据导入参数
      upload: {
        // 是否显示弹出层（导入）
        open: false,
        // 弹出层标题（导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
      },
      fileList:[]
    };
  },
  computed:{
    ...mapGetters(["sidebar", "device"]),
  },
  methods: {
    // 打开抽屉
    openDrawer(){
        this.dialogShow = true
    },
    /*提交操作*/
    handleSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.form);
            const formData = new FormData();
              // 添加表单字段
            formData.append("markType", this.form.markType);
            formData.append("userLevel", this.form.userLevel);
            if(this.form.markType == 0){
                formData.append("phoneMd5", this.form.phoneMd5);
            }else{
                // 添加文件字段
                if (this.form.file && this.form.file instanceof File) {
                    formData.append("file", this.form.file);
                }
            }
            // 星级设置操作
            markStar(this.form).then((res) => {
                 if (res.code === 200) {
                   this.$message.success("操作成功");
                   // 关闭抽屉
                   this.handleClose();
                 }
               });
          }
        });
    },
    /*关闭抽屉*/
    handleClose() {
       this.$refs["formRef"].resetFields();
       this.form = this.$options.data().form;
       this.dialogShow = false;
       // 重置文件列表
       this.$set(this,'fileList',[]);
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "星级标记导入";
      this.upload.open = true;
    },
    // 文件确定
    submitFileForm() {
      this.upload.open = false;
    },
    // 文件上传改变事件
    handleChange(file, fileList) {
      this.$set(this,'fileList',fileList);
      // console.log('文件上传改变事件:', file, fileList);
      this.$set(this.form,'file',file.raw)
    },
  },

};
</script>

<style scoped lang='scss'>
.markStarDrawer{

}
</style>